<!-- 商品详情 -->
<template>
	<view class="container">
		<!--header-->
		<view class="tui-header-box">
			<view class="tui-header">商品详情</view>
			<!-- <view class="tui-header-icon">
				<view class="tui-icon-box">
					<view class="icon iconfont iconmore" :class=" 2 >= 1 ? 'text-black' : 'text-white'"></view>
				</view>
				<view class="tui-icon-box">
					<view class="icon iconfont iconshouye" :class=" 2 >= 1 ? 'text-black' : 'text-white'"></view>
				</view>
			</view> -->
			<!-- #ifdef H5 || APP-PLUS -->
			<view class="tui-header-right">
				<view class="tui-icon-box tui-icon-ml">
					<view class="icon iconfont iconfenxiang" :class=" 2 >= 1 ? 'text-black' : 'text-white'"></view>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<!--header-->
		<!-- <tui-skeleton backgroundColor="#fafafa" borderRadius="10rpx"></tui-skeleton> -->
		<!--banner-->
		<view class="tui-skeleton">
		<view class="tui-banner-swiper tui-skeleton-fillet">
			<swiper style="height: 400rpx">
				<block v-for="(item, index) in 5" :key="index">
					<swiper-item :data-index="index" @tap.stop="previewImage">
						<image src="../../../static/goods/5.jpg" class="tui-slide-image"/>
					</swiper-item>
				</block>
			</swiper>
			<view class="tui-banner-tag">
				<view class="banner-tag-in">
					<view class="banner-tag round">
						bannerIndex + 1 / banner.length 
					</view>
				</view>
			</view>
			<!-- 视频播放 -->
			<view v-show="false">
				<view class="vedio-box">
					<!-- <video id="myVideo" :src="goodDetail.videoSrc" controls :enable-progress-gesture="false"></video> -->
				</view>
				<view class="playBtn u-f-ac"><view class="round"><image src="https://sbb-sbb.oss-cn-shenzhen.aliyuncs.com/static/playbtn.png"></image></view><view>播放</view></view>
				<view class="outBtn">退出播放</view>
			</view>
		</view>
		<!--banner-->
		
		<view class="pro-detail">
			<view class="por-list">
				<view class="pro-titbox u-f-ajc">
					<view class="pro-title tui-skeleton-rect">66</view>
					<button class="pro-button tui-skeleton-rect" open-type="share">
						分享
					</button>
				</view>
				<!-- 价格模块 2-->
				<view class="pro-pricebox u-f-jsb">
					<view class="pro-price tui-skeleton-rect">
						<view class="original-price text-bold">
							会员价：￥88
						</view>
						<view class="line-through text-sm">原价：￥99</view>
					</view>
					<view class="u-f-jse food-btm">
						<view class="tui-skeleton-rect">
							<view v-if="true" class=" round">加入购物车</view>
							<view v-else class="text-cut round">选规格</view>
							<view class="count">8</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="por-list">
				<view class="u-f-jsb">
					<view class="u-f-ac">
						<view class="por-specs tui-skeleton-rect">
							<text>发货</text>
							<text>广东省 广州市</text>
						</view>
					</view>
					<view class="text-gray tui-skeleton-rect">
						销量99+
					</view>
				</view>
			
			</view>
		</view>
		<!-- 详情strat -->
		<view class="product-details tui-skeleton-fillet">
			<view class="details-title bg-white u-f-ajc">
				<view></view>
				<text>商品信息</text>
				<view></view>
			</view>
			<view class="details-info">
				<!-- <rich-text :nodes="goodDetail.productDesc" style="max-width: 100%;"></rich-text> -->
			</view>
		</view>
		</view>
		<!-- <shopcart v-if="carList.length" :discount="mydiscount" :goods="carList" @goorderqr="geqrdd" @add="addCart" @dec="decreaseCart" @delAll="delAll"></shopcart> -->
	</view>
</template>

<script>
</script>


<style scoped lang="scss">
.vedio-box {
	width: 750rpx;
	height: 750rpx;
	background-color: #000;
	position: absolute;
	top: 0;
}
video {
		width: 750rpx;
		height: 640rpx;
	}
.playBtn,.outBtn {
	width: 180rpx;
	line-height: 60rpx;
	height: 60rpx;
	border-radius: 60rpx;
	background-color: rgba(255,255,255,0.5);
	text-align: center;
	position: absolute;
	top: 660rpx;
	left: 50%;
	margin-left: -100rpx;
}
.playBtn {
	.round {
		margin-right: 30rpx;
		margin-left: 8rpx;
		width: 50rpx;
		height: 50rpx;
		background-color: #F22222;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
	.tui-opcity .tui-menu-text,
	.tui-opcity .tui-badge-box {
		opacity: 0.5;
		transition: opacity 0.2s ease-in-out;
	}
	.tui-padding {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.tui-ptop {
		padding-top: 20px;
	}
	/* #ifdef H5 */
	.tui-ptop {
		padding-top: 44px;
	}
	
	/* #endif */
	
	.container {
		padding-bottom: 110rpx;
	}
	/* nav导航 */
	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 995;
	}
	.tui-header {
		width: 100%;
		font-size: 18px;
		line-height: 88px;
		font-weight: 500;
		height: 32px;
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tui-header-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}
	.tui-header-icon .tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: -4px;
	}
	.tui-header-right{
		position: fixed;
		top: 0;
		right: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}
	.tui-icon-ml {
		margin-left: 20rpx;
	}
	.tui-icon-box {
		position: relative;
		height: 30px !important;
		width: 30px !important;
		padding: 6px !important;
	
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		.icon{
			font-size: 20px;
		}
		
	}
	/* banner */
	.tui-banner-swiper {
		position: relative;
	}
	
	.tui-banner-tag {
		position: absolute;
		color: #fff;
		bottom: 0;
		width: 100%;
		.banner-tag-in{
			display: flex;
			justify-content: flex-end;
			margin: 0 30upx 30upx 0;
			.banner-tag{
				background-color: rgba($color: #000000, $alpha: 0.5);
				padding: 20upx 0;
				width: 100upx;
				text-align: center;
			}
		}
	}
	.tui-slide-image {
		width: 100%;
		display: block;
	}
	
	// 标题内容模块
	.pro-detail{
		.banner-pricebox{
			background-image: url(https://sbb-sbb.oss-cn-shenzhen.aliyuncs.com/static/index/YJG_pro_details_x3.png);
			background-repeat: no-repeat;
			background-position: top center;
			background-size: cover;
			width: 100%;
			height: 130upx;
			padding: 0 24upx;
			color: #FFFFFF;
			.line-through{
				margin-top: 15rpx;
				margin-left: 20rpx;
			}
		}
		.por-list{
			padding: 40upx 28upx;
			margin-bottom: 20upx;
			background-color: #FFFFFF;
			.pro-pricebox{
				.original-price{
					margin-right: 10upx;
					color: #F22222;
					& > text{
						font-size: 20upx;
					}
					.tui-price{
						font-size: 42upx !important;
						font-weight: bold;
					}
				}
				.pro-people{
					// color: $main-color;
				}
			}
			.pro-titbox{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				box-sizing: border-box;
				.pro-title{
					color: #080808;
					font-size: 30upx;
					font-weight: bold;
					word-break: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					width: 80%;
				}
				button.pro-button{
					width: 95upx;
					padding:9upx  0;
					background-color: #fee700;
					// color: $main-color;
					border-top-left-radius:50upx ;
					border-bottom-left-radius:50upx ;
					text-align: center;
					position: absolute;
					right: 0;
					font-size: 28rpx;
					line-height: 1;
				}
				button.pro-button::after{
					border: 0  none !important;
					box-shadow: none !important;
				}
			}
			.iconfanhui-right{
				// color:$black-color;
				font-size: 35upx;
				padding-left: 5upx;
			}
			.title{
				font-size: 34upx;
				font-weight: bold;
			}
			.pro-vip-del{
				// color: $main-color;
				.icon{
					// color: $main-color;
				}
			}
		}
		.por-specs{
			padding-right: 42upx;
			& > text:first-child{
				padding-right: 20upx;
				color: #aaaaaa;
			}
		}
		
	}
	.por-list >view:not(:last-child){
		margin-bottom: 27upx;
	}
	/* 详情 */
	.product-details{
		overflow: hidden;
		.details-title{
			padding: 30upx 0;
			& > text{
				font-size: 30upx;
				margin: 0 40upx;
			}
			& > view{
				width: 32%;
				height: 2upx;
				background-color: #EEEEEE;
			} 
		}
		.details-info{
			padding: 0 10upx;
			& > image{
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
	// 加入购物车
	.food-btm {
		flex: 1;
		position: relative;
		.round{
			text-align: center;
			line-height: 1;
			background-color: #f22222;
			color: #fff;
			padding: 15rpx 20rpx;
		}
	}
	
	.count {
		position: absolute;
		height: 40rpx;
		color: #fff;
		background-color: #f22222;
		min-width: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 40rpx;
		right: 0;
		bottom: 50rpx;
	
	}
	// 选择规格弹框
	.close-btn {
		width: 80upx;
		height: 80upx;
		background-color: #000000;
		border-radius: 50%;
		position: absolute;
		left: 280upx;
		right: 0;
		bottom: -150upx;
		opacity: 0.5;
	
		.icon {
			color: #FFFFFF;
			font-size: 60upx;
		}
	}
	.tui-modal-spec {
		.close-btn {
			width: 80upx;
			height: 80upx;
			background-color: #000000;
			border-radius: 50%;
			position: absolute;
			left: 280upx;
			right: 0;
			bottom: -150upx;
			opacity: 0.5;
		
			.icon {
				color: #FFFFFF;
				font-size: 60upx;
			}
		}
		.title {
			font-size: 34upx;
			color: #9A9A9A;
		}
	
		.spec {
			padding-left: 28upx;
			.specImg{
				margin-top: 20rpx;
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
			.sub {
				margin: 30upx 0 0upx;
			}
			.u-f-ac{
				flex-wrap: wrap;
			}
			.spec-item {
				border: 1px solid #CCCCCC;
				// width: 120upx;
				font-size: 23upx;
				text-align: center;
				padding: 6upx 6upx;
				margin-right: 30upx;
				margin-top: 20rpx;
			}
	
			.active {
				// border-color: $main-color;
				// color: $main-color;
			}
		}
		.foot-btm {
			margin-top: 40upx;
			padding: 30upx 20upx;
			background-color: #f6f6f6;
			width: 100%;
			border-bottom-left-radius: 24rpx;
			border-bottom-right-radius: 24rpx;
	
			.foot-left {
				.price {
					font-size: 36upx;
					font-weight: bold;
					// color: $main-color;
					padding-right: 10upx;
				}
	
				.del {
					font-size: 22upx;
				}
			}
			.btn {
				// background-color: $main-color;
				color: #FFFFFF;
				padding: 8upx 20upx;
			}
		}
	}
</style>
